<!-- 助农服务主页 -->
<template>
	<view id="body" @touchstart="start" @touchend="end">
		<!-- 搜索 -->
		<view class="search"> 
			<u-search placeholder="请输入搜索内容" v-model="keyword" :showAction="false" @search="search"></u-search>
		</view>
		<!-- 导航条 -->
		<view class="nav">
			<!-- 类型详细分类 -->
			<view class="type">
				<u-tabs :list="type" @click="fl" lineColor="#3c9cff" :inactiveStyle="{fontSize:'28rpx',}" :activeStyle="{fontSize:'28rpx'}"></u-tabs>
			</view>
		</view>
		<view class="goodsList">
			<!-- 商品卡片 -->
			<view class="goods-cart" v-for="(item,index) in orderList" :key="index" @click="orderclick(index)">
				<image :src="item.indexImg" class="goods-img"></image>
				<!-- 商品名称 -->
				<text class="goods-name">{{item.title}}</text>
				<text class="goods-buynum">{{item.buyusernum}}人购买</text>
				<text class="goods-price">￥{{item.price}}</text>
			</view>
		</view>
		<!-- 订单底部加载 -->
		<view class="loading" >
			<u-loadmore :status="status" :line="line" :nomoreText="nomoreText" /> 
		</view>
		<!-- 右侧发布标签 -->
		<view class="tb" v-show="tb"></view>
		<view class="bottom" :class="flag ? 'left1':'right1'"> 
			<text class="t-icon t-icon-zengjia1-copy" style="width: 96rpx;height: 96rpx;" @click="addgoods"></text>
		</view>
	</view>
</template>

<script>
	import {http} from "../static/service/requestAddress/rtas.js"
	export default {
		data() {
			return {
				keyword:"",
				type:[
					{
						name:"禽畜肉类",
					},
					{
						name:"粮油米面",
					},
					{
						name:"水果",
					},
					{
						name:"蔬菜",
					},
					{
						name:"水产品",
					},
					{
						name:"其他",
					},
				],
				orderList:[],//商品列表
				clientX:'',
				flag:false, 
				tb:true,
				status: "nomore",//"loading",
				line:true,
				nomoreText:"没有更多了",
				page:0,//分页值
				typenum:0,//分类类型值
				keyword:"",//搜索内容
			}
		},
		created(){
			//获取数据
			uni.request({
				url:http+"nongsuke/"+0+"/"+0,  
				method:"GET",
				complete:(res) =>{
					if(res.data.code == 20021){
						if(res.data.date == null){
							this.status = "nomore"
						}else{
							console.log("获取的数据是："+JSON.stringify(res.data.date))
						var datalist =  res.data.date
						//对数据处理
						for(var i = 0; i < datalist.length;i++){
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
						}
						//将数据加入集合
						this.orderList = datalist
						this.status = "nomore"
						//增加分页值
						this.page += 1
					}
					}else{
						uni.$u.toast("获取数据失败!")
					}
				}
			})
		},
		onReachBottom() {
			this.status = "loading"
			//获取数据
			uni.request({
				url:http+"nongsuke/"+this.typenum+"/"+this.page,
				method:"GET",
				complete:(res) =>{
					if(res.data.code == 20021){
						if(res.data.date == null){
							this.status = "nomore"
						}else{
						var datalist = res.data.date
						//对数据处理
						for(var i = 0; i < datalist.length;i++){
							datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
						}
						//将数据加入集合
						this.orderList = this.orderList.concat(datalist)
						this.status = "nomore"
						//增加分页值
						this.page += 1
					}
					}else{
						uni.$u.toast("获取数据失败!")
					}
				}
			})
			// this.orderList = this.orderList.concat(list)//加载数据
		},
		methods:{
			//搜索功能
			 search(){ 
				this.orderList = []
				this.status = "loading"
				if(this.keyword == "" | this.keyword.length == 0){
					this.status = "nomore"
					return
				}
				 uni.request({
				 	url:http+"nongsuke/search/"+this.keyword+"/"+this.typenum+"/0",
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
							const datalist = res.data.date
							//对数据处理
							for(var i = 0; i < datalist.length;i++){
								datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
							}
							this.orderList = this.orderList.concat(datalist)
							this.status = "nomore"
						}else{
							console.log("获取失败")
						}
					}
				 })
			 },
			//切换分类
			fl(itme){
				this.num = 0
				this.status = "loading"
				this.typenum = itme.index//改变类型
				this.orderList = []
				console.log("点击了分类"+itme.index)
				//获取数据
				uni.request({
					url:http+"nongsuke/"+itme.index+"/"+0,
					method:"GET",
					complete:(res) =>{
						if(res.data.code == 20021){
							if(res.data.date == null){
								this.status = "nomore"
							}else{
							var datalist = res.data.date
							//对数据处理
							for(var i = 0; i < datalist.length;i++){
								datalist[i].createTime = (datalist[i].createTime).substring(0,datalist[i].createTime.lastIndexOf(":"))
							}
							//将数据加入集合
							this.orderList = datalist
							this.status = "nomore"
							//增加分页值
							this.page += 1
						}
						}else{
							uni.$u.toast("获取数据失败!")
						}
					}
				})
			},
			//点击按钮跳转详情页
			orderclick(index){
				//点击了详情页面
				uni.navigateTo({
					url:"/nongsuke/nongsukeInfo?data="+JSON.stringify(this.orderList[index])
				})
			},
			//增加商品
			addgoods(){
				console.log("点击了增加按钮!")
				uni.navigateTo({
					url:"/nongsuke/nongsukeadd" 
				})
			},
			start(e){
			    this.clientX=e.changedTouches[0].clientX;   
			},
			end(e){
				const T = e.changedTouches[0].clientX-this.clientX
				if(T < 0){ 
					this.tb = false
					this.flag = true
				}
				if(T > 0 ){
					this.flag = false
					setTimeout(()=>{
						this.tb = true
					},100)
				}
			}
		}
	}
</script> 

<style>
	@import url("../static/css/componentsCss/nongsuke/index.css");
	.left1{
		position: fixed;
		right: 8rpx; 
		bottom: 16%; 
		transition: all 0.5s; 
	}
	.right1{
		position: fixed;
		right: -96rpx;
		bottom: 16%;
		transition: all 0.5s; 
		opacity: 0;
	}
</style>